<template>
  <div>
    <div class="whiteBac mt10 p10">
      <el-button type="primary" size="small" @click="livesOpen">添加直播</el-button>
    </div>
    <div class="whiteBac mt20 p10">
      <el-form :inline="true" :model="searchForm" size="mini">
        <div class="mt15">
          <div class="fl">
            <el-form-item label="讲师手机号">
              <el-input v-model="searchForm.phone" placeholder="请输入讲师手机号"></el-input>
            </el-form-item>
          </div>
          <div class="fl ml20">
            <el-form-item label="开始时间" label-width="70px">
              <el-date-picker
                v-model="searchForm.startTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="ml20 fl">
            <el-button type="primary" size="small" @click="queryBroadcastList(1)">查询</el-button>
            <el-button size="small" @click="resetSearchForm">重置</el-button>
          </div>
          <div class="clear"></div>
        </div>
      </el-form>
    </div>
    <div class="whiteBac mt10 pb10">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="broadcast_num"
          label="直播ID">
        </el-table-column>
        <el-table-column
          prop="name"
          width="180px"
          label="直播名称">
        </el-table-column>
        <el-table-column
          width="140px"
          label="FMS URL">
          <template slot-scope="scope">
            <div class="fl overflow nowrap" style="width: 80px;">{{scope.row.fmsurl}}</div>
            <div class="fl ml10"><a v-if="scope.row.fmsurl !==null" :title="scope.row.fmsurl" :data-clipboard-text="scope.row.fmsurl" href="javascript:;" class="blue-color" :class="['item'+scope.$index]" @click="copyContent('.item'+scope.$index)">复制</a></div>
            <div class="clear"></div>
          </template>
        </el-table-column>
        <el-table-column
          width="140px"
          label="播放路径">
          <template slot-scope="scope">
            <div class="fl overflow nowrap" style="width: 80px;">{{scope.row.playurl}}</div>
            <div class="fl ml10"><a v-if="scope.row.playurl !==null" :title="scope.row.playurl" :data-clipboard-text="scope.row.playurl" href="javascript:;" class="blue-color" :class="['play'+scope.$index]" @click="copyContent('.play'+scope.$index)">复制</a></div>
            <div class="clear"></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="start_time"
          label="开始时间"
          width="110px"
        >
        </el-table-column>
        <el-table-column
          prop="end_time"
          label="结束时间"
          width="110px"
        >
        </el-table-column>
        <el-table-column
          label="直播时长">
          <template slot-scope="scope">
            {{scope.row.whenlong | timeFilter}}
          </template>
        </el-table-column>
        <el-table-column
          prop="rewardpearl"
          label="打赏珍珠">
        </el-table-column>
        <el-table-column
          prop="docent_account"
          width="120px"
          label="讲师手机号">
        </el-table-column>
        <el-table-column
          prop="realpearl"
          label="获得珍珠">
        </el-table-column>
        <el-table-column
          label="直播状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status=='0'">准备中</span>
            <span v-if="scope.row.status=='1'">直播中</span>
            <span v-if="scope.row.status=='2'">已结束</span>
            <span v-if="scope.row.status=='3'">已取消</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="broadcast_count"
          width="110"
          label="直播观看人次">
        </el-table-column>
        <el-table-column
          width="160"
          label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status=='0'" type="text" @click="handleLives(scope.row.id,'1')">开启直播</el-button>
            <el-button v-if="scope.row.status=='0'" type="text" @click="handleLives(scope.row.id,'3')">取消直播</el-button>
            <el-button v-if="scope.row.status=='1'" type="text" @click="handleLives(scope.row.id,'2')">关闭直播</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt10 tc">
        <page-pagination :page="page" :pageSize="pageSize" :total="total" v-on:pageFun="handleCurrentChange"></page-pagination>
      </div>
    </div>
    <!--发布弹窗 begin-->
    <el-dialog width="40%" title="添加直播" :visible.sync="dialogFormVisible">
      <el-form :model="liveForm" :rules="rules" ref="liveForm" label-width="80px" label-position="left">
        <el-form-item label="直播名称" prop="name">
          <el-input v-model="liveForm.name" :maxlength="140" placeholder="显示到前端的名称"></el-input>
        </el-form-item>
        <el-form-item label="直播封面" prop="overImg">
          <el-upload
            ref="upload"
            class="avatar-uploader lives-img"
            accept="image/jpeg,image/jpg,image/bmp,image/png"
            :action="uploadFileAction"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="appSuccess">
            <img v-if="liveForm.overImg" :src="liveForm.overImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon lives-img-icon"></i>
          </el-upload>
          <div class="light-grey mt2">尺寸比例建议：516*290，只能上传jpg/jpeg/png/bmp格式，且不超过500kb</div>
        </el-form-item>
        <el-form-item label="讲师手机" prop="phone">
          <el-input v-model="liveForm.phone" :maxlength="11" @blur="validatorPhone" placeholder="请输入讲师手机"></el-input>
        </el-form-item>
        <el-form-item label="讲师昵称" >
          <el-input v-model="liveForm.nickname" disabled="disabled" placeholder="昵称"></el-input>
          <div class="light-grey mt5">直播打赏分成会进入该讲师的账户</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" :disabled="isDisabled" @click="submitMethod('liveForm')">添加直播</el-button>
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!--发布弹窗 end-->
  </div>

</template>

<script>
  import service from '@/service/index'
  import {checkMobile} from '@/base/utils'
  import Clipboard from 'clipboard'
  import pagePagination from '@/components/AG_Common/pagePagination.vue'
  export default {
    data(){
      return{
        tableData:[],
        isDisabled:false,
        dialogFormVisible:false,
        clipboard:null,
        searchForm:{
          phone:'',
          startTime:''
        },
        liveForm:{
          name:'',
          overImg:'',
          phone:'',
          nickname:''
        },
        rules:{
          name:[
            { required: true, message: '请输入直播名称', trigger: 'blur' },
            { min: 1, max: 140, message: '长度在 1 到 140 个字符', trigger: 'blur' }
          ],
          overImg:[
            { required: true, message: '请选择封面', trigger: 'change,blur' }
          ],
          phone:[
            { required: true, validator: checkMobile, trigger: 'blur' }
          ],
          nickname:[
            { required: true, message: '请输入有效的讲师手机号', trigger: 'blur' }
          ]
        },
        total:14,
        pageSize:10,
        page:1,
        teacherStatus:true, //判断手机号是否存在的标示  true为存在 false为不存在
        uploadFileAction:service.haiBeiServerUpload()
      }
    },
    mounted(){
      this.queryBroadcastList(1);
    },
    components:{
      pagePagination
    },
    methods:{
      copyContent(content){
        this.clipboard = new Clipboard(content);
        this.clipboard.on('success', (e)=> {
          this.$message({type:'success', message:'复制成功'});
          this.clipboard.destroy();
        });
      },
      handleCurrentChange(val){
        this.queryBroadcastList(val);
      },
      livesOpen(){
        this.dialogFormVisible = true;
        this.resetForm();
      },
      queryBroadcastList(page=1){
        let params = {
          docent_account:this.searchForm.phone,
          start_time_begin:this.searchForm.startTime?this.searchForm.startTime[0]:'',
          start_time_end:this.searchForm.startTime?this.searchForm.startTime[1]:'',
          page:page,
          pageSize:this.pageSize
        }
        service.haiBeiServerQueryBroadcastList(params).then(res => {
          if (res.success) {
            this.page = res.result.page;
            this.total = res.result.nums;
            this.tableData = res.result.pageList;
          }else{
            this.$message({type:'error', message:res.msg});
            return;
          }
        });
      },
      validatorPhone(){
        let reg = /^1[3|4|5|7|8]\d{9}$/;
        if ( !reg.test( this.liveForm.phone ) ) {
          return;
        }
        service.haiBeiServerQueryDocentByAccount({account:this.liveForm.phone}).then(res => {
          if (res.success) {
            this.liveForm.nickname = res.result.nickname;
            this.teacherStatus = true;
            //this.$message({type:'success', message:res.msg});
          }else{
            this.liveForm.nickname = '';
            this.teacherStatus = false;
            this.$message({type:'error', message:res.msg});
            return;
          }
        });
      },
      handleLives(id,status){
        let tips;
        tips = status=='1'?'此操作将开启直播':(status=='2'?'此操作将关闭直播':'此操作将取消直播');
        //操作直播
        this.$confirm(tips+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //直播操作接口begin
          let params = {
            id:id,
            status:status
          }
          service.haiBeiServerUpdateBroadcastStatus(params).then(res => {
            if (res.success) {
              this.queryBroadcastList(1);
              this.$message({type:'success', message:res.msg});
            }else{
              this.$message({type:'error', message:res.msg});
              return;
            }
          });
          //直播操作接口end
        }).catch(() => {});
      },
      submitMethod(formName){
        //弹窗
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.teacherStatus==false){
              setTimeout(()=>{
                this.$message({type:'error', message:'请检查讲师昵称是否正确或是否存在'});
              },1000);
              return;
            }
            this.isDisabled = true;
            let params = {
              name:this.liveForm.name,
              image_url:this.liveForm.overImg,
              docent_account:this.liveForm.phone
            }
            service.haiBeiServerAddBroadcast(params).then(res => {
              if (res.success) {
                setTimeout(()=>{
                  this.isDisabled = false;
                },1000);
                this.resetForm();
                this.dialogFormVisible = false;
                this.queryBroadcastList(1);
                this.$message({type:'success', message:res.msg});
              }else{
                this.isDisabled = false;
                this.$message({type:'error', message:res.msg});
                return;
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      appSuccess(file){
        this.liveForm.overImg = file.url;
      },
      beforeAvatarUpload(file) {
        const isLt200kb = file.size / 1024 > 200;
        const isLt500kb = file.size / 1024 < 500;
        if (!isLt200kb) {
          this.$message.error('上传图片大小必须超过200KB!');
        }
        if (!isLt500kb) {
          this.$message.error('上传图片大小不能超过500KB!');
        }
        return isLt200kb && isLt500kb ;
      },
      resetForm(){
        this.liveForm.name = '';
        this.liveForm.overImg = '';
        this.liveForm.phone = '';
        this.liveForm.nickname = '';
        setTimeout(()=>{
          this.$refs.upload.clearFiles();
        },1000);
      },
      resetSearchForm(){
        this.searchForm.phone='';
        this.searchForm.startTime='';
        this.queryBroadcastList(1);
      }
    }
  }
</script>

<style scoped>

</style>
